import React ,{useState ,useEffect} from 'react';
import style from './UserEditUsername.module.scss'
import {useNavigate} from "react-router-dom";
import {notification} from "antd";
import {getEmailCodeApi,activationApi,verificationCodeApi,verificationNewCodeApi} from '../../http/userApi'


//定义弹窗成功提示的一些内容
type NotificationType = 'success' | 'info' | 'warning' | 'error';
const openNotificationWithIcon = (type: NotificationType,msg) => {
    notification[type]({
        message: msg,
        placement:'top',
        duration: 1,
    });
};
function UserEditUsername(props) {
    const navigate = useNavigate()
    const initState = {
        oldCode:'',
        newEmail:'',
        newCode:'',
    }
    const [state , setState] = useState(initState)
    const changeInput =(e)=>{
        setState({
            ...state,[e.target.name]:e.target.value
        })
    }
    //点击返回
    const backHandler =()=>{
        navigate(-1)
    }
    //点击提交
    const submitHandler =()=>{

        if(state.oldCode==''){
            return openNotificationWithIcon('info','请输入原密码')
        }
        if(state.newEmail==''){
            return openNotificationWithIcon('info','请输入新密码')
        }
        if(state.newCode==''){
            return openNotificationWithIcon('info','请再次输入新密码')
        }
        verificationCodeApi(state.oldCode)
            .then(res=>{
                if (res.data.code==200){
                    verificationNewCodeApi({email:state.newEmail,code:state.newCode})
                        .then(resq=>{
                            if(resq.data.code==200){
                                navigate(-1)
                                return openNotificationWithIcon('success','登录账号修改成功')
                            } else{
                                return openNotificationWithIcon('info','激活邮箱验证码错误，请重新输入')
                            }
                        })
                }else{
                    return openNotificationWithIcon('info','原邮箱验证码错误，请重新输入')
                }
            })


    }
    //获取邮箱验证码
    const getCode =()=>{
        getEmailCodeApi()
            .then(res=>{
                if(res.data.code==200){
                    openNotificationWithIcon("success","验证码发送成功")
                }
            })
    }
    //激活邮箱
    const activation =()=>{
        activationApi({email:state.newEmail})
            .then(res=>{
                if(res.data.code==200){
                    openNotificationWithIcon("success","验证码发送成功")
                }
            })
    }

    return (
        <div>
            <div className={style.back} onClick={backHandler}>返回</div>
            <div className={style.header}>修改登录账号</div>
            <div className={style.item}>
                <div>邮箱验证码</div>
                <input type="text" value={state.oldCode} name="oldCode" onChange={(e)=>changeInput(e)}></input>
                <div className={style.btn} onClick={getCode}>获取验证码</div>
            </div>

            <div className={style.item}>
                <div>新邮箱</div>
                <input type="text"value={state.newEmail} name="newEmail" onChange={(e)=>changeInput(e)}></input>
                <div className={style.btn} onClick={activation}>激活邮箱</div>
            </div>
            <div className={style.item}>
                <div>邮箱验证码</div>
                <input type="text" value={state.newCode} name="newCode" onChange={(e)=>changeInput(e)}></input>
            </div>
            <div className={style.item_title}>
                <div></div>
                <div className={style.title}>激活邮箱后将收到验证邮件，请回填邮件中的6位验证码</div>
            </div>
            <div className={style.item}>
                <div></div>
                <div className={style.submit} onClick={submitHandler}>提交</div>
            </div>


        </div>
    );
}

export default UserEditUsername;